<template>
  <div class="p-2">
    <el-form :disabled="isLoading">
      <el-form-item class="d-flex ai-center" style="height: 40px">
        <el-button
          v-for="(item, i) in workList"
          :key="i"
          :icon="item.icon"
          :type="item.type"
          @click="item.btnFunc"
        >
          {{ item.name }}
        </el-button>
      </el-form-item>
    </el-form>
    <!--    文件区-->
    <file-area ref="fileChild"></file-area>
    <footers v-model:title="pageTitle"></footers>
  </div>
</template>

<script lang="ts" setup>
import fileArea from './components/fileArea.vue'
import footers from './components/footer.vue'
import { DocumentAdd, Delete, Refresh } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import useCurrentInstance from './utils/useCurrentInstance'
import { fileListDto, openPath } from './components/tool'
import { ElMessage, ElNotification } from 'element-plus'

// 使用  $confirm $alert
const { proxy } = useCurrentInstance()
console.log('proxy', proxy)
const ipcRenderer = window?.electron.ipcRenderer
const isLoading = ref(false)
const pageTitle = ref({
  type: 'mp4',
  output: ''
})
// 清空文件
const removeAll = async () => {
  proxy
    .$confirm('确定要清空文件吗', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      fileChild.value.removeAll()
    })
    .catch(() => {})
}
//开始转换
const beginStart = async () => {
  const fileList: Array<fileListDto> = fileChild.value.fileList
  if (fileList.length) {
    isLoading.value = true
    for (let index = 0; index < fileList.length; index++) {
      const el = fileList[index]
      const { path, name, filetype } = el
      el.status = 1
      const outpath =
        (pageTitle.value.output ? pageTitle.value.output : path.substring(0, path.indexOf(name))) +
        name +
        '.' +
        pageTitle.value.type
      const info = {
        input: path,
        filetype,
        type: pageTitle.value.type,
        output: outpath
      }
      if (filetype === pageTitle.value.type) {
        el.status = 2
        continue
      }
      const res = await window.electron.ipcRenderer.invoke('merge-merges', info).catch((err) => {
        console.log('merge-merges', err)
      })
      if (res) {
        el.status = 2
        el.outpath = outpath
        // ElMessage.success('转换成功：' + name)
      }
      if (res.msg) {
        ElNotification({
          type: 'error',
          title: res.msg,
          message: res.path || ''
        })
      }
    }

    isLoading.value = false
    console.log('loading', isLoading.value)
    if (pageTitle.value.output) {
      openPath(pageTitle.value.output)
    }
  } else {
    ElMessage.error('请选择待转换文件！')
  }
}

const fileChild = ref()
// 添加文件
const OpenVideoDir = async () => {
  const res = await window.electron.ipcRenderer.invoke('selectVideoFiles')
  let fileList = Array<fileListDto>
  if (res.length === 0) return
  fileList = res.map((item, key) => {
    return {
      ...getPath(item),
      path: item,
      id: key,
      status: 0
    }
  })
  fileChild.value.changeFile(fileList)
  console.log(fileList)
}
function getPath(path: string) {
  const length = path.lastIndexOf('\\') + 1
  const temp: string[] = path.substring(length, path.length).split('.')
  return { name: temp[0], fileType: temp[1] }
}
const workList = [
  {
    name: '添加文件',
    btnFunc: OpenVideoDir,
    icon: DocumentAdd,
    type: 'success'
  },
  {
    name: '清空文件',
    btnFunc: removeAll,
    icon: Delete,
    type: ''
  },
  {
    name: '开始转换',
    btnFunc: beginStart,
    icon: Refresh,
    type: 'primary'
  }
]

onMounted(() => {
  // 启动
  ipcRenderer.send('init')
  ipcRenderer.on('merge-merge-result', (args) => {
    if (args?.type === 'err') {
      ElMessage.error('转换失败：')
    }
  })
})
</script>

<style scoped></style>
